<template>
  <div>
    <div style="text-align: center;font-size: 20px;padding:15px;">Hello Page2</div>

    <div style="width:600px;margin:20px auto;display:flex;justify-content:center;">
      <form class="form-inline">
        <label for="email">防伪码:</label>
        &nbsp;<input type="email" class="form-control" id="email" v-model="code" placeholder="请输入防伪码">
        &nbsp;<button type="button" class="btn btn-primary" @click="queryCode()">查询</button>
      </form>
    </div>

    <div style="width:600px;height:350px;margin:0 auto;" v-if="isShowRes">
      <div style="text-align:center"><img :src="'http://www.china3-15.com/css/images/icons/'+ImageType"></div>
      <div style="text-align:center;padding-top:20px;"><p style="width:400px;font-size:15px;color:#8a8a8a;margin:0 auto;">{{ResultInfo}}</p></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "page2",
    components: {},
    data() {
      return {
        code:'',
        isShowRes:false,
        ImageType:'',
        ResultInfo:''
      }
    },
    async asyncData ({$axios,route}) {

      let res = await $axios({
        method: 'get',
        url: `/fangwei/Module/QueryCode.ashx?type=cn_query&code=${route.query.code}`
      })
      return {
        code:route.query.code,
        ImageType: res.ImageType,
        ResultInfo: res.ResultInfo
      }


    },
    mounted() {
    },
    methods: {
      queryCode(){

        this.$axios.get(`/fangwei/Module/QueryCode.ashx?type=cn_query&code=${this.code}`)
          .then((res) => {
          this.isShowRes = true;
          this.ImageType = res.ImageType;
          this.ResultInfo = res.ResultInfo;

        }).catch((error) => {
          console.log('error='+error)
        })


      },
    },
    destroyed() {
    }
  }
</script>

<style scoped>

</style>
